import React from 'react';
import Row from './Row';

class Body extends React.Component {
    displayName = 'Body';

    renderColGroup () {
        const {columns} = this.props;
        return <colgroup>
            {
                columns.map(column => {
                    if (column._hide) {
                        column.width = 0;
                    }
                    return <col key={column.name || column.type} width={column.width}/>;
                })
            }
        </colgroup>;
    }

    renderBody () {
        const {data, columns, onChange, datum} = this.props;
        let disIndex = -1;
        return <tbody className='cm-table-tbody'>
            {
                data && data.map((row, index) => {
                    if (!row._hide) {
                        disIndex ++;
                    }
                    return <Row datum={datum} index={disIndex} onHoverRow={this.props.onHoverRow} onChange={onChange} key={row.id} data={row} columns={columns}/>;
                })
            }
            {
                !data || (data && !data.length)
                    ? <tr>
                        <td className='cm-table-no-data' colSpan={columns.length}>暂无数据</td>
                    </tr>
                    : null
            }
        </tbody>;
    }

    componentDidMount () {
        this._isMounted = true;
    }

    componentWillUnmount () {
        this._isMounted = false;
    }

    render () {
        return <table cellSpacing={0} cellPadding={0} border={0} ref={f => this.table = f}>
            {this.renderColGroup()}
            {this.renderBody()}
        </table>;
    }
}

export default Body;
